<template>
  <div class="colors-wrapper">
    <select class="color-presets" v-model="colorsBar">
      <option v-for="item in group" :key="item">
        {{ item }}
      </option>
    </select>
    <div class="colors-bar-wrapper" ref="colors" v-if="now.length > 0">
      <div
        class="color-select"
        v-for="item in now"
        :key="item"
        @click="setColor(item, 0)"
        @contextmenu="setColor(item, 1)"
      >
        <div class="color-block" :style="{ backgroundColor: '#' + item }"></div>
      </div>
    </div>
  </div>
</template>

<script>
import data from "../data/colors.json";
export default {
  name: "Colors",
  computed: {
    now() {
      return (this.colorsData && this.colorsData[this.colorsBar]) || [];
    },
    group() {
      let arr = [];
      if (this.colorsData == null) return arr;
      for (const key in this.colorsData) {
        arr.push(key);
      }
      return arr;
    },
  },
  data() {
    return {
      colorsBar: "",
      colorsData: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.colorsData = data.colors;
      this.colorsBar = "default";
    },
    setColor(color, type) {
      this.$bus.$emit("color", { color: "#" + color, type });
      var _colors = [];
      _colors[type] = "0x" + color;
      this.$bus.$emit("changeColor", _colors);
    },
  },
};
</script>

<style lang="scss" scoped>
.color-presets {
  padding: 0 10px;
  font-size: 14px;
  width: 100%;
  height: 36px;
  text-transform: uppercase;
  background-color: #575555;
  color: #fff;
  border: 0;
  outline: none;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: auto;
  box-shadow: 1px 1px 0px #333;
  font-family: "Oswald";
}
.color-select {
  margin: 0px;
  height: 34px;
  width: 20%;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 4px;
  &:hover {
    border-color: #fff;
  }
  .color-block {
    width: 100%;
    height: 100%;
    border-radius: 3px;
  }
}
.colors-bar-wrapper {
  width: 100%;
  height: 170px;
  overflow: auto;
  box-sizing: border-box;
  padding: 0 0 0 1px;
  background-color: #535353;
  margin: 0px 0;
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  &::-webkit-scrollbar {
    width: 10px;
    height: 0px;
    background: #ededed;
  }
  &::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
  }
}
</style>